<template>
  <router-view v-slot="{ Component }">
    <transition name="fade">
      <component :is="Component" v-if="flag" />
    </transition>
  </router-view>
</template>

<script lang="ts" setup>
import useLayoutSettingStore from '@/store/modules/setting'
import { ref, watch, nextTick } from 'vue'
const LayoutSettingStore = useLayoutSettingStore()
let flag = ref(true)
watch(
  () => LayoutSettingStore.IsRefresh,
  () => {
    if (flag.value) {
      flag.value = false
      LayoutSettingStore.IsRefresh = false
      nextTick(() => {
        flag.value = true
      })
    }
  },
)
</script>

<style lang="scss" scoped>
.fade-enter-from {
  opacity: 0;
  transform: scale(0);
}

.fade-enter-active {
  transition: all 1s;
}

.fade-enter-to {
  opacity: 1;
  transform: scale(1);
}
</style>
